<template>
  <div class="haibei-home">
    <div class="home-left fl" :style="{width:leftWidth+'px'}">
      <div class="bg-blue-dark tc">
        <img src="/static/images/indexlogo.png" alt="" style=" vertical-align: middle">
        <!-- <span class="white fs16 bold">&nbsp;后台管理系统</span> -->
      </div>
      <div :style="{height:height+'px',background:'#001529',overflow:'auto'}">
        <imenu-item :menu-list="menuList" :collect-list="collectList"></imenu-item>
      </div>
    </div>
     <!-- {{getNavItem}} -->
    <div class="home-right fr" :style="{width:width+'px'}">
     
         <div class="breadcrumb-nav fl" v-if="$route.name!=='welcome'">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{name:'welcome'}">首页</el-breadcrumb-item>
           <!-- <el-breadcrumb-item v-if="getNavItem.parentName">{{getNavItem.parentName}}</el-breadcrumb-item> -->
          <el-breadcrumb-item>{{getNavItem.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right-bar tr pr20">
        <!-- <i class="p10" :class="[isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left']"  @click="isCollapseBtn"></i> -->
        <el-button type="info" size="mini">{{users.name}}</el-button>
        <el-button type="success" plain size="mini" @click="passwordFormVisible=true">修改密码</el-button>
        <el-button type="danger" plain size="mini" @click="loginOut">退出</el-button>
      </div>
   
      <div :style="{height: height+'px','overflow': 'auto'}" class="home-content mt10 pl20 pr20">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
    <div class="clearfix"></div>

<el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="500px" >
  <el-form :model="ruleFormPwd" size="mini" ref="ruleFormPwd" label-width="100px" :rules="rules">
    <el-form-item label="原始密码"  prop="oldPassword">
      <el-input v-model="ruleFormPwd.oldPassword" type="password" placeholder="请输入原始密码"></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="pass">
      <el-input  v-model="ruleFormPwd.pass" type="password" placeholder="请输入新密码"></el-input>
    </el-form-item>
     <el-form-item label="确认密码" prop="checkPass">
      <el-input v-model="ruleFormPwd.checkPass"  type="password" placeholder="请确认密码"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancelPassword('ruleFormPwd')">取 消</el-button>
    <el-button type="primary" @click="submitPassword('ruleFormPwd')">确 定</el-button>
  </div>
</el-dialog>


  </div>
</template>

<script>
import utils from "@/base/utils";
import service from "@/service/index_c";
import imenuItem from "@/components/Common/MenuItem";
import { getCookie ,delCookie} from "@/base/utils";
import { mapGetters } from "vuex";
export default {
  name: "home",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleFormPwd.checkPass !== "") {
          this.$refs.ruleFormPwd.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleFormPwd.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      height: 0,
      menuList: [],
      collectList: [],
      width: 0,
      passwordFormVisible: false,
      ruleFormPwd: {
        oldPassword: "",
        pass: "",
        checkPass: ""
      },
      isCollapse: false,
      leftWidth: 256,
      users: {},
      rules: {
        oldPassword: [{required: true,min:6,max:20, message: '密码长度为6到20', trigger: "blur" }],
        pass: [{required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [{required: true, validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  computed: {
    ...mapGetters(["getNavItem"])
  },
  mounted() {
    this.setHeight();
    window.onresize = () => {
      this.setHeight();
    };
    this.getMenuItemData();
    this.users = getCookie("userInfo");
  },
  methods: {
    submitPassword(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
           this.changePasswordFun(formName);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    cancelPassword(formName){
       this.$refs[formName].resetFields();
        this.passwordFormVisible=false;
    },
   async changePasswordFun(formName){
     let res=await service.haiBeiServerChangePassword({
       old_password:this.ruleFormPwd.oldPassword,
       new_password:this.ruleFormPwd.pass
     });
     if(res.success){
       this.$message({
         type:'success',
         message:'修改成功,下次登录之前生效'
       })
        this.passwordFormVisible=false;
         this.$refs[formName].resetFields();
     }else{
       this.$message({
         type:'error',
         message:res.msg
       })
     }
    },
    async getMenuItemData() {
      let result = await service.haiheiServerMenuItem();
      if (result.success) {
        let list = result.result.data;
        this.menuList = list;
        this.collectList = result.result.collectionMenu;
        this.$store.dispatch("setAllMenu", list.data);
      } else {
        this.$message({
          type: "error",
          message: "获取失败"
        });
      }
    },

    setHeight() {
      let win_height =
        document.documentElement.clientHeight || document.body.clientHeight;
      let win_width =
        document.documentElement.clientWidth || document.body.clientWidth;
      this.height = win_height - 61;
      this.width = win_width - 256;
    },
    isCollapseBtn() {
      let win_width =
        document.documentElement.clientWidth || document.body.clientWidth;
      this.isCollapse = !this.isCollapse;
      this.width = this.isCollapse != true ? win_width - 256 : win_width - 65;
      this.leftWidth = this.isCollapse != true ? 256 : 65;
    },
    loginOut() {
      this.$confirm("您确定退出系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false
      })
        .then(() => {
          service.haiBeiServerLoginOut().then(res => {
            if (res.success) {
              const loading = this.$loading({
                lock: true,
                text: "退出系统中,请稍等...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
              });
              delCookie('userInfo');
               delCookie('agentCode');
               delCookie('navName')
              setTimeout(() => {
                loading.close();
                this.$router.push({
                  name: "login"
                });

              }, 1000);
            }
          });
        })
        .catch(() => {});
    }
  },
  components: {
    imenuItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-menu {
  border-right: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 256px;
}

.home {
  height: 100vh;
  width: 100%;
  background: #fff;
}

.haibei-home {
  width: 100%;
  min-width: 1300px;
}

.home-comtent {
  background: #f1f1f1;
  margin: 10px auto;
}

.home-left {
  box-shadow: 0px 2px 10px #000;
  overflow: hidden;
  /* width:256px; */
}

.home-right {
  min-width: 1030px;
  background: #f0f2f5;
}

.bg-blue-dark {
  background: #001529;
  height: 60px;
  line-height: 60px;
}

.header-right-bar {
  height: 60px;
  line-height: 60px;
  padding: 0 12px 0 0;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  -moz-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.breadcrumb-nav {
  margin-top: 6px;
  background: #fff;
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
